<template>
  <div>
    <div class="authentication-checking" v-if="selectTable.status === '1' && !showEditView">
      <div class="main">
        <h3><i class="icon iconfont icon-chenggong"></i>您的{{options[selectTable.authType]}}认证资料已经提交成功！</h3>
        <p>您的{{options[selectTable.authType]}}认证信息正在审核中（3-5个工作日），审核通过后即可完成中亿财经网专家认证，请您耐心等待。</p>
        <div class="acc-info-item-c">
          <button @click="$router.push('/dashboard/index')">先去逛逛</button>
        </div>
      </div>
    </div>
    <div class="authentication-failure" v-if="selectTable.status === '5' && !showEditView">
      <div class="main">
        <h3><i class="icon iconfont icon-shibai"></i>{{options[selectTable.authType]}}认证失败</h3>
        <p>失败原因是：{{selectTable.reason}}</p>
        <div class="acc-info-item-c">
          <button @click="handleEdit()">重新提交</button>
          <span style="cursor: pointer;" class="see" @click="handleEdit()">查看认证资料>></span>
        </div>
      </div>
    </div>
    <div class="authentication-success" v-if="selectTable.status === '10' && !showEditView">
      <div class="main">
        <div class="tip">
          <h3>
            <i class="icon iconfont icon-chenggong"></i>恭喜您{{options[selectTable.authType]}}认证成功！</h3>
          <p>以下权益已为您开通：</p>
        </div>
        <ul class="cur-flex">
          <li>专属身份标识
            <i class="icon iconfont icon-zhuanshu"></i>
          </li>
          <li>每日发文篇数+10
            <i class="icon iconfont icon-zhuanshu"></i>
          </li>
          <li>理投师
            <span class="see">查看</span>
          </li>
        </ul>
        <ul class="cur-flex">
          <li>理投师
            <span class="see">查看</span>
          </li>
          <li>图文直播
            <span class="see">查看</span>
          </li>
          <li>理投师
            <span class="see">查看</span>
          </li>
        </ul>
        <div class="acc-info-item-c">
          <button @click="$router.push('/dashboard/index')">先去逛逛</button>
          <span style="cursor: pointer;" class="see" @click="handleEdit()">查看认证资料>></span>
        </div>
      </div>
    </div>
    <div v-show="showEditView">
      <p v-if="selectTable.status === '10'" class="tip success-tip">
        <i class="icon iconfont icon-chenggong"></i>您已完成{{options[selectTable.authType]}}认证，可在此页面进行修改；修改信息需要再次审核，请谨慎修改。您已拥有中亿理投师使用权限，可进入&nbsp;&nbsp;中亿理投师>
      </p>
      <p v-if="selectTable.status === '5'" class="tip failure-tip">
        <i class="icon iconfont icon-shibai"></i>{{options[selectTable.authType]}}认证失败，请重新提交！
      </p>
      <form class="layui-form" lay-filter="submit">
        <div class="r-bsic-info">
          <div class="r-item-head">
            <span>基本信息</span>
          </div>
          <div class="r-bsic-info-c r-item-c">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">
                  <i>*</i>{{active === '2' ? '机构法人': '真实姓名'}}</label>
                <div class="layui-input-inline">
                  <span class="ed" v-if="selectTable.authenticationStatus===1">{{selectTable.names}}</span>
                  <input v-else v-model="selectTable.names" type="text" lay-verify="required">
                </div>
              </div>
              <div class="layui-inline ml26">
                <label class="layui-form-label"><i>*</i>{{options[active]}}名称</label>
                <div class="layui-input-inline">
                  <span class="ed" v-if="selectTable.authenticationStatus===1">{{selectTable.nickname}}</span>
                  <input v-else v-model="selectTable.nickname" type="text" lay-verify="required">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline" :key="'avatar_'+ active">
                <label class="layui-form-label"><i>*</i>{{options[active]}}头像</label>
                <span class="r-info-photo"><img :src="selectTable.avatar" class="r-photo"></span>
                <span class="r-info-photo-tip">
                  尺寸 200*200 最大500K 格式jpg、png 要求清晰、健康的图片
                  <p>
                    <button type="button" class="r-photo-up avatarUpload" lay-data="{accept:'png|jpg|jpeg|bmp'}">选择文件</button>
                  </p>
                </span>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label"><i>*</i>{{options[active]}}介绍</label>
                <div class="layui-input-inline">
                  <textarea v-model="selectTable.descs" class="layui-textarea" placeholder="一句话介绍您的专栏" lay-verify="required"></textarea>
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><i>*</i>擅长领域</label>
              <ul class="r-info-sc" id="r-info-sc">
                <li v-for="(item, index) in domainVal" :key="index">{{item.name}}</li>
              </ul>
              <template v-if="selectTable.authenticationStatus!==1">
                <button class="r-info-sc-add" @click="addSc()" type="button">编辑</button>
                <span class="r-info-sc-tip">最多可添加1个，请谨慎填写。</span>
              </template>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">
                <i>*</i>风格标签</label>
              <ul class="r-info-sc" id="r-info-sc-tag">
                <li v-for="(item, index) in tagVal" :key="index">{{item.name}}</li>
              </ul>
              <button class="r-info-sc-add" @click="addTag()" type="button">编辑</button>
              <span class="r-info-sc-tip">最多可添加5个，请谨慎填写。</span>
            </div>
          </div>
        </div>
        <!--***联系方式***-->
        <div class="r-bsic-info">
          <div class="r-item-head mt54">
            <span>联系方式</span>
          </div>
          <div class="r-item-c item-location">
            <div class="layui-form-item" v-if="active !== '2'">
              <label class="layui-form-label"><i style="margin-right: 8px">*</i>联系地址</label>
              <div class="layui-input-inline" style="width:300px;">
                <area-cascader type='text' v-model="selectTable.address1" :level='1' :data="pcaa"></area-cascader>
              </div>
              <div class="layui-input-inline" style="width:300px;">
                <input type="text" v-model="selectTable.contactDetail" placeholder="街道/门牌号" lay-verify="required">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><i style="margin-right: 8px">*</i>所在地</label>
              <div class="layui-input-inline" style="width:300px;">
                <area-cascader type='text' v-model="selectTable.address2" :level='1' :data="pcaa"></area-cascader>
              </div>
              <div class="layui-input-inline" style="width:300px;">
                <input type="text" v-model="selectTable.detailAddress" placeholder="街道/门牌号" lay-verify="required">
              </div>
            </div>
            <div class="layui-inline">
              <div class="layui-form-item" v-if="active !== '2'">
                <label class="layui-form-label">所属公司</label><input type="text" v-model="selectTable.company">
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label"><i>*</i>QQ号</label>
                <input v-model="selectTable.qq" type="text" lay-verify="required">
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <input type="text" v-model="selectTable.email">
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">{{active === '2' ? '官网链接' : '个人专属网址'}}</label>
                <input type="text" v-model="selectTable.link" :placeholder="active === '2' ? '官网链接' : '可以是微博、博客等个人专属网站网址'">
              </div>
            </div>
            <div class="layui-inline r-item-lxfs">
              <div class="layui-form-item">
                <label class="layui-form-label">微信号</label><input v-model="selectTable.wechat" type="text"></div>
              <div class="layui-form-item" :key="'wx_' +active">
                <label class="layui-form-label"> </label>
                <span class="r-item-code">
                  <img class="r-ecode" alt="微信二维码" :src="selectTable.qrcode" v-if="selectTable.qrcode">
                  <span v-else style="display:block;line-height:100px;text-align:center;color:#ccc;">微信二维码</span>
                </span>
                <span class="r-item-code-tip r-info-photo-tip" style="width: 250px;">
                  <span>尺寸 200*200 最大500K 格式jpg、png</span>
                  <span style="display:inline-block; width:200px;">
                    <input v-model="selectTable.qrcodeType" type="radio" name="qrcodeType" value="0" title="个人">
                    <input v-model="selectTable.qrcodeType" type="radio" name="qrcodeType" value="1" title="公众">
                  </span>
                  <p>
                    <button style="margin-top: 10px;" type="button" class="r-ecode-up qrcodeUpload" lay-data="{accept:'png|jpg|jpeg|bmp'}">选择文件</button>
                  </p>
                </span>
              </div>
            </div>
          </div>
        </div>
        <!--***身份认证***-->
        <div class="r-bsic-info">
          <div class="r-item-head mt54">
            <span>身份认证</span>
          </div>
          <div class="r-item-c r-item-sfz">
            <template v-if="active !== '2'">
              <div class="layui-form-item">
                <label class="layui-form-label"><i style="margin-right: 8px">*</i>身份证号</label>
                <span class="ed" v-if="selectTable.authenticationStatus===1">{{selectTable.certifyNumber}}</span>
                <input v-else v-model="selectTable.certifyNumber" type="text" placeholder="请谨慎填写，一旦审核通过将不能修改" lay-verify="required">
              </div>
              <div class="layui-form-item" :key="'card_' +active">
                <label class="layui-form-label"><i>*</i>身份证照片</label>
                <span v-if="!selectTable.certifyPic.length" class="layui-inline r-item-yyzz-img">
                  <img class="r-yyzz-img" src="../../../assets/sfz-exam.png">
                </span>
                <template v-if="selectTable.authenticationStatus===1">
                  <span v-if="selectTable.certifyPic.length" v-for="item in selectTable.certifyPic" :key="item" class="layui-inline r-item-yyzz-img">
                    <img :src="item" alt="">
                    <img class="position-delete" src="../../../assets/delete_star.png" alt="">
                  </span>
                </template>
                <template v-else>
                  <span v-if="selectTable.certifyPic.length" v-for="(item, index) in selectTable.certifyPic" :key="item" class="layui-inline r-item-yyzz-img">
                    <img :src="item">
                    <img @click="removeCertifyPic(index)" class="position-delete" src="../../../assets/delete_star.png" alt="">
                  </span>
                  <span class="r-info-photo-tip r-item-yyzz-tip">
                    请按照左图上传本人手持身份证清晰正面照片 支持.jpg.png格式，大小不超过2M。
                    <p v-show="selectTable.certifyPic.length<1">
                      <button type="button" class="r-yyzz-up certifyPic" lay-data="{accept:'png|jpg|jpeg|bmp'}">选择文件</button>
                    </p>
                    <p v-show="selectTable.certifyPic.length>0">
                      <span class="upload-disabled" @click="uploadError(1)">最多上传1个图片</span>
                    </p>
                  </span>
                </template>
              </div>
            </template>
            <template v-if="active === '3'">
              <div class="layui-form-item">
                <label class="layui-form-label"><i>*</i>能力资质说明</label>
                <span class="ed" v-if="selectTable.authenticationStatus===1">{{selectTable.certificates}}</span>
                <textarea v-else v-model="selectTable.certificates" style="width: 500px; height: 100px;" class="layui-textarea" placeholder="包括且不限于(如有连接也请一并提供)： 1.投资经理;2.个人实盘战绩截图;3.个人博客;4.微博;5.电视节目片断;6.视频;7.获奖证明等。" lay-verify="required"></textarea>
              </div>
              <div class="layui-form-item" :key="'ll_'+ active">
                <label class="layui-form-label"><i>*</i>能力资质证明</label>
                <span v-if="!selectTable.certificatesImg.length" class="layui-inline r-item-yyzz-img">
                  <img class="r-yyzz-img">
                </span>
                <template v-if="selectTable.authenticationStatus===1">
                  <span v-if="selectTable.certificatesImg.length" v-for="item in selectTable.certificatesImg" :key="item" class="layui-inline r-item-yyzz-img">
                    <img :src="item" alt="">
                    <img class="position-delete" src="../../../assets/delete_star.png" alt="">
                  </span>
                </template>
                <template v-else>
                  <span v-if="selectTable.certificatesImg.length" v-for="(item, index) in selectTable.certificatesImg" :key="item" class="layui-inline r-item-yyzz-img">
                    <img :src="item" alt="">
                    <img @click="removeCertificatesImg(index)" class="position-delete" src="../../../assets/delete_star.png" alt="">
                  </span>
                  <span class="r-info-photo-tip r-item-yyzz-tip" style="width:600px">
                    保证清晰可见； 支持jpg、png格式照片，大小不超过2M
                    <p v-show="selectTable.certificatesImg.length<3">
                      <button type="button" class="r-yyzz-up certificatesImg" lay-data="{accept:'png|jpg|jpeg|bmp'}">选择文件</button>
                    </p>
                    <p v-show="selectTable.certificatesImg.length>2">
                      <span class="upload-disabled" @click="uploadError(3)">最多上传3个图片</span>
                    </p>
                  </span>
                </template>
              </div>
            </template>
            <template v-if="active === '1'">
              <div class="layui-form-item">
                <label class="layui-form-label"><i>*</i>执业资质编号</label>
                <span class="ed" v-if="selectTable.authenticationStatus===1">{{selectTable.positions}}</span>
                <input v-else v-model="selectTable.positions" style="width: 500px;" type="text" placeholder="证券从业/执业证书编号、金融分析师证书编号" lay-verify="required">
              </div>
              <div class="layui-form-item" :key="'zy_'+ active">
                <label class="layui-form-label"><i>*</i>上传执业资质</label>
                <span v-if="!selectTable.positionPic.length" class="layui-inline r-item-yyzz-img">
                  <img class="r-yyzz-img">
                </span>
                <template v-if="selectTable.authenticationStatus===1">
                  <span v-if="selectTable.positionPic.length" v-for="item in selectTable.positionPic" :key="item" class="layui-inline r-item-yyzz-img">
                    <img :src="item" alt="">
                    <img class="position-delete" src="../../../assets/delete_star.png" alt="">
                  </span>
                </template>
                <template v-else>
                  <span v-if="selectTable.positionPic.length" v-for="(item, index) in selectTable.positionPic" :key="item" class="layui-inline r-item-yyzz-img">
                    <img :src="item" alt="">
                    <img @click="removePositionPic(index)" class="position-delete" src="../../../assets/delete_star.png" alt="">
                  </span>
                  <span class="r-info-photo-tip r-item-yyzz-tip">
                    可上传副本照片或扫描件，保证清晰可见； 支持jpg、png格式照片，大小不超过2M
                    <p v-show="selectTable.positionPic.length<3">
                      <button type="button" class="r-yyzz-up positionPic" lay-data="{accept:'png|jpg|jpeg|bmp'}">选择文件</button>
                    </p>
                    <p v-show="selectTable.positionPic.length>2">
                      <span class="upload-disabled" @click="uploadError(3)">最多上传3个图片</span>
                    </p>
                  </span>
                </template>
              </div>
            </template>
            <template v-if="active === '2'">
              <div class="layui-form-item">
                <label class="layui-form-label"><i>*</i>资质号码</label>
                <span class="ed" v-if="selectTable.authenticationStatus===1">{{selectTable.certifyNumber}}</span>
                <input v-else v-model="selectTable.certifyNumber" style="width: 500px;" type="text" placeholder="营业资质编号" lay-verify="required">
              </div>
              <div class="layui-form-item" :key="'zz_'+ active">
                <label class="layui-form-label"><i>*</i>上传营业资质</label>
                <span v-if="!selectTable.certifyPic.length" class="layui-inline r-item-yyzz-img">
                  <img class="r-yyzz-img">
                </span>
                <template v-if="selectTable.authenticationStatus===1">
                  <span v-if="selectTable.certifyPic.length" v-for="item in selectTable.certifyPic" :key="item" class="layui-inline r-item-yyzz-img">
                    <img :src="item" alt="">
                    <img class="position-delete" src="../../../assets/delete_star.png" alt="">
                  </span>
                </template>
                <template v-else>
                  <span v-if="selectTable.certifyPic.length" v-for="(item, index) in selectTable.certifyPic" :key="item" class="layui-inline r-item-yyzz-img">
                    <img :src="item" alt="">
                    <img @click="removePositionPic(index)" class="position-delete" src="../../../assets/delete_star.png" alt="">
                  </span>
                  <span class="r-info-photo-tip r-item-yyzz-tip">
                    可上传副本照片或扫描件，保证清晰可见； 支持jpg、png格式照片，大小不超过2M
                    <p v-show="selectTable.certifyPic.length<3">
                      <button type="button" class="r-yyzz-up certifyPic" lay-data="{accept:'png|jpg|jpeg|bmp'}">选择文件</button>
                    </p>
                    <p v-show="selectTable.certifyPic.length>2">
                      <span class="upload-disabled" @click="uploadError(3)">最多上传3个图片</span>
                    </p>
                  </span>
                </template>
              </div>
            </template>
            <div class="layui-form-item" :key="'submit'+active">
              <div class="layui-input-block" v-if="selectTable.status==='1'">
                <button lay-filter="*" class="layui-btn layui-btn-disabled">待审核</button>
              </div>
              <div class="layui-input-block" v-else>
                <button lay-submit lay-filter="*" class="layui-btn layui-btn-danger">{{selectTable.authenticationStatus!==1?'提交审核':'修改信息'}}</button>
              </div>
            </div>
          </div>
        </div>
      </form>
      <div style="width: 0;height: 0;overflow: hidden;">
        <div id="field-change">
          <div class="cur-flex cur-flex-wrap">
            <div class="checked-item margin-bottom-10" v-for="(item, index) in domains" :key="index" v-if="item.type===0">
              <div class="layui-inline">
                <div class="layui-input-inline" style="width:auto;">
                  <input style="width: 18px;height: 18px;" type="checkbox" v-model="item.checked" :id="'tags_'+item.id" :title="item.name" :value="item.id" lay-skin="primary" :checked="item.checked">
                  <label :for="'tags_'+item.id" style="font-size: 15px;line-height: 18px;vertical-align: super;">{{item.name}}</label>
                </div>
              </div>
            </div>
          </div>
          <form class="layui-form">
            <div class="layui-form-item">
              <input type="text" v-model="selectTable.selfDomains" placeholder="请输入自定义擅长领域（最多1个）">
            </div>
          </form>
        </div>
      </div>
      <div style="width: 0;height: 0;overflow: hidden;">
        <div id="tag-change">
          <div class="cur-flex cur-flex-wrap">
            <div class="checked-item margin-bottom-10" v-for="(item, index) in tags" :key="index" v-if="item.type===0">
              <div class="layui-inline">
                <div class="layui-input-inline" style="width:auto;">
                  <input style="width: 18px;height: 18px;" type="checkbox" v-model="item.checked" :id="'tags_'+item.id" :title="item.name" :value="item.id" lay-skin="primary" :checked="item.checked">
                  <label :for="'tags_'+item.id" style="font-size: 15px;line-height: 18px;vertical-align: super;">{{item.name}}</label>
                </div>
              </div>
            </div>
          </div>
          <form class="layui-form">
            <div class="layui-form-item addSc">
              <input type="text" v-model="selectTable.selfTags" placeholder="请输入自定义标签（最多5个，逗号隔开）">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { pcaa } from 'area-data'
import 'vue-area-linkage/dist/index.css'
import VueAreaLinkage from 'vue-area-linkage'
import division from '@/utils/division'
import * as api from '@/service/api'
import { mapState } from 'vuex'
import $ from 'jquery'
Vue.use(VueAreaLinkage)
export default {
  props: {
    active: String
  },
  data () {
    return {
      options: {
        '1': '专家',
        '2': '机构',
        '3': '达人'
      },
      pload: false,
      pcaa: pcaa,
      loading: false,
      division: division,
      tags: [],
      domains: [],
      tagVal: [],
      tagInputVal: '',
      domainVal: [],
      qrcodeType: '',
      showEditView: false,
      rules: {
        avatar: { required: true, message: '请上传头像！' },
        domains: { required: true, other: 'selfDomains', message: '请添加擅长领域！' },
        tags: { required: true, other: 'selfTags', message: '请添加擅长风格标签！' }
      },
      formatData: {},
      selectTable: {
        certificatesImg: [],
        positionPic: [],
        certifyPic: []
      }
    }
  },
  components: {
  },
  created () {
    this.getAuthcert()
  },
  watch: {
    active () {
      this.getAuthcert()
    }
  },
  computed: {
    ...mapState({
      userInfo: state => Object.assign({}, state.me.user)
    })
  },
  methods: {
    formInit () {
      let that = this
      window.layui.use(['form', 'upload'], function () {
        let upload = window.layui.upload
        upload.render({
          elem: '.qrcodeUpload',
          url: api.uploadUrl,
          headers: {
            accessToken: sessionStorage.getItem('token')
          },
          before: function (obj) {
          },
          done: function (res) {
            that.selectTable.qrcode = res.data.src
          }
        })

        upload.render({
          elem: '.avatarUpload',
          url: api.uploadUrl,
          headers: {
            accessToken: sessionStorage.getItem('token')
          },
          before: function (obj) {
          },
          done: function (res) {
            that.selectTable.avatar = res.data.src
          }
        })

        upload.render({
          elem: '.positionPic',
          url: api.uploadUrl,
          headers: {
            accessToken: sessionStorage.getItem('token')
          },
          done: function (res) {
            that.selectTable.positionPic.push(res.data.src)
          }
        })

        upload.render({
          elem: '.certificatesImg',
          url: api.uploadUrl,
          headers: {
            accessToken: sessionStorage.getItem('token')
          },
          done: function (res) {
            that.selectTable.certificatesImg.push(res.data.src)
          }
        })

        upload.render({
          elem: '.certifyPic',
          url: api.uploadUrl,
          headers: {
            accessToken: sessionStorage.getItem('token')
          },
          done: function (res) {
            that.selectTable.certifyPic.push(res.data.src)
          }
        })

        let form = window.layui.form
        form.on('checkbox', function (data) {
          console.log(data)
        })

        form.on('radio', function (data) {
          that.selectTable.qrcodeType = data.value
        })

        form.on('submit', function (data) {
          that.saveInfo()
          return false
        })
        form.render()
      })
    },
    removePositionPic (index) {
      this.selectTable.positionPic.splice(index, 1)
    },
    removeCertifyPic (index) {
      this.selectTable.certifyPic.splice(index, 1)
    },
    removeCertificatesImg (index) {
      this.selectTable.certificatesImg.splice(index, 1)
    },
    uploadError (n) {
      window.layer.msg('最多上传' + n + '张图片！', {
        icon: 2,
        anim: 6
      })
      return false
    },
    addSc () {
      let that = this
      window.layer.open({
        title: '添加擅长领域（最多选择1个，可自定义）',
        btn: ['确定', '取消'],
        skin: 'addSc',
        type: 1,
        btnAlign: 'c',
        content: $('#field-change'),
        yes: function (index, layero) {
          let domainVal = []
          that.domains.map(item => {
            if (item.type === 0 && item.checked) {
              domainVal.push(item)
            }
          })
          if (that.selectTable.selfDomains) {
            let curSelf = that.selectTable.selfDomains.split(',')
            let lenStatus = false
            curSelf.map(item => {
              if (item.length > 6) {
                lenStatus = true
              }
              domainVal.push({
                'name': item,
                type: 1
              })
            })
            if (lenStatus) {
              window.layer.msg('单个自定义领域须小于6位字符', {
                icon: 2,
                time: 1500,
                anim: 6
              })
              return false
            }
          }
          if (domainVal.length > 1) {
            window.layer.msg('擅长领域最多添加1个！', {
              icon: 2,
              time: 1500,
              anim: 6
            })
            return false
          }
          window.layer.close(index)
          that.domainVal = domainVal
        }
      })
    },
    addTag () {
      let that = this
      window.layer.open({
        title: '添加风格标签（最多选择5个，可自定义）',
        btn: ['确定', '取消'],
        skin: 'addTag',
        type: 1,
        btnAlign: 'c',
        content: $('#tag-change'),
        yes: function (index, layero) {
          let tagVal = []
          that.tags.map(item => {
            if (item.type === 0 && item.checked) {
              tagVal.push(item)
            }
          })
          if (that.selectTable.selfTags) {
            let curSelf = that.selectTable.selfTags.split(',')
            let lenStatus = false
            curSelf.map(item => {
              if (item.length > 6) {
                lenStatus = true
              }
              tagVal.push({
                'name': item,
                type: 1
              })
            })
            if (lenStatus) {
              window.layer.msg('单个自定义领域须小于6位字符', {
                icon: 2,
                time: 1500,
                anim: 6
              })
              return false
            }
          }
          if (tagVal.length > 5) {
            window.layer.msg('风格标签最多添加5个！', {
              icon: 2,
              time: 1500,
              anim: 6
            })
            return false
          }
          window.layer.close(index)
          that.tagVal = tagVal
        }
      })
    },
    validateData () {
      let curReturn = true
      let domains = []
      let selfDomains = []

      this.formatData = this.JSONo({}, this.selectTable)
      this.formatData.authType = this.active
      this.formatData.positionPic = this.formatData.positionPic.join(',')
      this.formatData.certifyPic = this.formatData.certifyPic.join(',')
      this.formatData.certificatesImg = this.formatData.certificatesImg.join(',')
      this.formatData.contactProvince = this.formatData.address1[0]
      this.formatData.contactCity = this.formatData.address1[1]
      this.formatData.contactDistrict = this.formatData.address1[2]
      this.formatData.province = this.formatData.address2[0]
      this.formatData.city = this.formatData.address2[1]
      this.formatData.district = this.formatData.address2[2]

      this.domainVal.map(item => {
        if (item.type === 0) {
          domains.push(item.name)
        } else {
          selfDomains.push(item.name)
        }
      })
      this.formatData.domains = domains
      this.formatData.selfDomains = selfDomains

      let tags = []
      let selfTags = []
      this.tagVal.map(item => {
        if (item.type === 0) {
          tags.push(item.name)
        } else {
          selfTags.push(item.name)
        }
      })
      this.formatData.tags = tags
      this.formatData.selfTags = selfTags

      for (let item in this.rules) {
        if (!(this.formatData[item] || (this.rules[item].other && this.formatData[this.rules[item].other]))) {
          window.layer.msg(this.rules[item].message, {
            icon: 2,
            anim: 6
          })
          curReturn = false
          break
        }
      }
      return curReturn
    },
    handleEdit () {
      this.showEditView = true
    },
    async getAuthcert () {
      this.pload = false
      try {
        this.selectTable = {
          certificatesImg: [],
          positionPic: [],
          certifyPic: []
        }
        let res = await api.getAuthcert({
          authType: this.active
        })
        this.selectTable = res.data.certification
        this.domains = res.data.fieldList
        this.tags = res.data.tagList

        this.selectTable.address1 = [this.selectTable.contactProvince, this.selectTable.contactCity, this.selectTable.contactDistrict]
        this.selectTable.address2 = [this.selectTable.province, this.selectTable.city, this.selectTable.district]

        let selfDomains = []
        this.domainVal = []
        this.domains.map(item => {
          if (item.checked) {
            this.domainVal.push(item)
          }
          if (item.type === 1) {
            selfDomains.push(item.name)
          }
        })

        this.selectTable.selfDomains = selfDomains.join(',')

        let selfTags = []
        this.tagVal = []
        this.tags.map(item => {
          if (item.checked) {
            this.tagVal.push(item)
          }
          if (item.type === 1) {
            selfTags.push(item.name)
          }
        })

        this.selectTable.selfTags = selfTags.join(',')
        this.selectTable.positionPic = this.selectTable.positionPic ? this.selectTable.positionPic.split(',') : []
        this.selectTable.certifyPic = this.selectTable.certifyPic ? this.selectTable.certifyPic.split(',') : []
        this.selectTable.certificatesImg = this.selectTable.certificatesImg ? this.selectTable.certificatesImg.split(',') : []
        if (!this.selectTable.status) {
          this.showEditView = true
        }
        this.$nextTick(() => {
          this.formInit()
        })
        this.pload = true
      } catch (e) {
        console.log(e)
      }
    },
    async saveInfo () {
      try {
        if (this.active === '1') {
          this.rules.certifyPic = { required: true, message: '请上传本人手持身份证图片！' }
          this.rules.positionPic = { required: true, message: '请上传执业资质图片！' }
        }
        if (this.active === '2') {
          this.rules.certifyPic = { required: true, message: '请上传营业资质图片！' }
        }
        if (this.active === '3') {
          this.rules.certificatesImg = { required: true, message: '请上传能力资质证明图片！' }
        }

        if (!this.validateData()) {
          return false
        }

        if (this.formatData.id) {
          await api.modifyAuthcert(this.formatData)
        } else {
          await api.addAuthcert(this.formatData)
        }
        window.layer.msg('提交成功', { icon: 1 })
        this.selectTable.status = '1'
        this.getAuthcert()
        this.showEditView = false
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss">
.authentication-failure {
  padding: 30px 70px;
  i {
    font-size: 32px;
    color: $red;
    padding-right: 20px;
  }
  h3 {
    font-size: 32px;
    color: #333;
  }
  p {
    color: #888;
    font-size: 15px;
    margin-top: 20px;
    margin-left: 63px;
  }
  .acc-info-item-c {
    border: none;
    text-align: left;
    margin-left: 55px;
  }
  .see {
    color: #256394;
    padding-left: 30px;
    font-size: 16px;
  }
}
.authentication-checking {
  padding: 30px 70px;
  i {
    font-size: 40px;
    color: #28a745;
    padding-right: 20px;
  }
  h3 {
    font-size: 32px;
    color: #333;
  }
  p {
    color: #888;
    font-size: 15px;
    margin-top: 20px;
    margin-left: 63px;
  }
  .acc-info-item-c {
    border: none;
    text-align: left;
    margin-left: 55px;
  }
}
.authentication-success {
  padding: 30px 70px;
  .tip {
    padding: 20px;
    i {
      font-size: 40px;
      color: #28a745;
      padding-right: 20px;
    }
    h3 {
      font-size: 32px;
      color: #333;
    }
    p {
      color: #888;
      font-size: 16px;
      margin-top: 20px;
      margin-left: 63px;
    }
  }
  ul {
    color: #666;
    margin-left: 63px;
    margin-top: 20px;
    font-size: 16px;
    li {
      width: 250px;
      list-style: disc;
    }
    i {
      color: #93cd00;
    }
  }
  .see {
    color: #256394;
    padding-left: 30px;
    font-size: 16px;
  }
  .acc-info-item-c {
    border: none;
    text-align: left;
    margin-left: 55px;
  }
}
.upload-disabled {
  width: 150px;
  height: 36px;
  line-height: 36px;
  border-radius: 3px;
  background: #f6f6f6;
  border: 1px solid #dcdcdc;
  cursor: pointer;
  margin-top: 26px;
  display: block;
  text-align: center;
}
</style>
